<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
.title {
	margin-top: 5px;
	font-family: 微软雅黑;
	font-size: 25px;
	line-height: 30px;
	font-weight: bold;
}
.xgg_date{
	font-size: 14px;
	color: #888;
}
.content{
	font-size: 18px;
	line-height: 20px;
}

.contain {
	margin-top: 10px;
	margin-left: 8px;
	margin-right: 8px;
	font-family: 微软雅黑;
	font-size: 16px;
	margin-bottom: 60px;
}

.tel, .address {
	width: 100%;
	line-height: 25px;
	font-size: 16px;
	font-family: 微软雅黑;
}

.contcontain {
	margin-top: 10px;
}

.image {
	margin-top: 10px;
	width: 100%;
}

.imagesize {
	margin-top: 5px;
	width: 100%;
}

.address {
	position: relative;
	width: 100%;
	height:40px;
	text-indent: 0px;
	line-height: 40px;
	margin-top: 20px;
	color: #888;
	overflow: hidden;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}


.tel {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40px;
	line-height: 40px;
	border-left: 1px solid #eee;
}

.phone {
	margin-left: 8px;
	margin-top: 8px;
	width: 24px;
	height: 24px;
	text-align: center;
}
</style>
</head>
<body>
	<div class="contain">
		<div id="contain"></div>
		<div class="title" id="title" ></div>
		<div class="xgg_date" id="xgg_date">时间:2018-6-16 9:45:12</div>
		<div class="contcontain">
			<div class="content" id="content"></div>
			<div id="image_container">
			<!-- <img class="imagesize" id="image" src="http://47.94.166.156:8080/adlet/upload/icon/52.png" id="adimg" /> -->
			</div>
		</div>
		<div class="address"> 
			<span class="address_detail" id="address" >地址:</span>
			<div class="tel">
				<a id="telnum" href=""><img class="phone" src="../image/phone.png"></a>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/constantValue.js"></script>
<script type="text/javascript">

	var images;//图片地址数组
	var photos;//移动端需要的图片地址
	var localServer="http://192.168.0.103:8080/";
	//var localServer="http://47.94.166.156:80/";
	
	//判断是那种设备并执行相应的接口
	function fnCheckImage(one) {
		var imageIndex=one.id.split("");
	    var u = navigator.userAgent, app = navigator.appVersion;
	    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
	    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	    if (isAndroid) {
	        Android.checkImages(photos,imageIndex[imageIndex.length-1]);
	    }
	    if (isIOS) {
	    	window.webkit.messageHandlers.appModel.postMessage({"photos":photos,"imageIndex":imageIndex[imageIndex.length-1]});
	    }
	} 

	//加载完页面即执行
	$(function(){
		fnLoadData();
	});
 
    //获取数据"dyneqad1524027883035"
	function fnLoadData(){
		$.ajax({
			url: "${pageContext.request.contextPath}/ad/getAdById.do",
			type: "POST",
			data:{id:"<%=request.getParameter("ad_id") %>"},
			timeout:10000,
			dataType:"json", 
			success:function(json){
			    dataShow(json);
			}
		});
	}
 
	//展示数据
	function dataShow(json){
		document.getElementById("title").innerHTML=json.data.title;
		document.getElementById("content").innerHTML=json.data.content;
		var address=document.getElementById("address");
		address.innerHTML='地址:'+json.data.address;
		var telnum=document.getElementById("telnum");
		telnum.href="tel:"+json.data.tel;
		var image_container=$("#image_container");
		if(json.data.photos){
			images=json.data.photos.split(',');
			for(var i=0;i<images.length;i++){
				var html='';
				html+='<img class="imagesize" id="image'+i+'" src="${pageContext.request.contextPath}/'+images[i]+'" onclick="fnCheckImage(this)"/>';
				image_container.append(html);
				photos=images;
				photos[i]=localServer+images[i];
			}
		}
	}
	
	
</script>
</html>